<template>
  <div class="login">
      <van-nav-bar
        title="登录"
        left-text="返回"
       
        left-arrow
        @click-left="$router.go(-1)"
    
        />

        <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="pwd"
            type="password"
            name="pwd"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
        </van-form>
        <van-notice-bar 
        color="#1989fa" 
        background="#ecf9ff" 
        left-icon="info-o" 
        mode="link"
        @click="$router.push('/registe')"
        >
         没有账号？去注册
        </van-notice-bar>
  </div>
</template>

<script>
import { Toast } from 'vant';// 引入轻提示
export default {
    data () {
        return {
            username:'',
            pwd:''
        }
    },
    methods: {
        onSubmit(v){
            console.log(v);
            this.$axios.Login(v)
            .then(res=>{
                console.log(res);
                if(res.data.code==200){
                    // 在登录成功的状态下 存用户信息和token
                    // localStorage
                    let {user_avatar,user_nick}=res.data.msg
                    // console.log(user_avatar);
                    // 组合参数
                    let obj={
                        user_avatar,
                        user_nick
                    }
                    console.log(obj);
                    // 存用户信息
                    localStorage.setItem("userinfo",JSON.stringify(obj))
                    // 存token令牌
                    localStorage.setItem("token",res.data.token)
                    // 跳回
                    this.$router.go(-1)
                }else{// 登录失败
                    Toast.fail({
                            message: res.data.msg,
                            position: 'top',
                            });
                    // 清空表单数据
                    this.username=''
                    this.pwd=''
                }
            })
        }
    }
}
</script>

<style>

</style>